<template>
	<div class="functions-div">
		<div class="item" v-for="(item,index) in functionArr" :key='index'>
			<div class="borderBox flex list" v-for="(ite,i) in item" :key='i'
				@click.stop="jumpPage(ite)">
				<span class="txt">{{ite.title}}</span>
				<i class="iconfont icon-xiangyou"></i>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	data(){
		return{
			functionArr: [
				[
					{
						title: '听音乐',
						url: '/pages/functions/music'
					}
				],[
					{
						title: '搜小说',
						url: '/pages/functions/book',
						type: 'novel'
					}
				],[
					{
						title: '五子棋',
						url: '/pages/functions/games/gomoku'
					}
				]
			]
		}
	},
	methods: {
		jumpPage(item){
			if(item.type=='novel'){  //小说
				uni.showActionSheet({
					itemList: ['分类', '书架'],
					success: (res)=>{
						let tapIndex = res.tapIndex;
						let url;
						if(tapIndex==0){
							url = '/pages/functions/novel/sort';
						}else if(tapIndex==1){
							url = '/pages/functions/novel/bookshelf';
						}
						uni.navigateTo({
							url: url,
							animationType: 'zoom-out'
						});
					}
				});
				return;
			};
			if(item.url && typeof(item.url)=='string'){
				uni.navigateTo({
					url: item.url,
					animationType: 'slide-in-bottom'
				});
			}
		}
	}
}
</script>

<style lang="less" scoped>
.item{
	background-color: #fff;
	.list{
		justify-content: space-between;
		height: 80upx;
		padding: 0 30upx;
		
	}
	.list+.list{
		border-top: 1px solid #eee;
	}
}
.item+.item{
	margin-top: 30upx;
}
</style>
